<template>
	<view class="indexWrapper">
		<view class="bannerWrapper" :style="{height: imageHeight}">
			<image class="zhuye"  src="../../static/zhuyebeijing.jpg"></image>
		</view>
		<!-- #ifdef MP-WEIXIN -->
			<view v-if="status==0" class="openWrapper" v-on:click="onUserInfo()" :style="{top:tt}">
				<image class="open-icon" src="../../static/dianji.png"></image>
				<view class="open-title">点击开门</view>
			</view>
			<view v-if="status==1" class="openWrapper" :style="{top:tt}">
				<image class="open-icon" src="../../static/phone.png"></image>
				<view class="open-title">绑定手机号</view>
				<button class="openCC" open-type="getPhoneNumber" @getphonenumber="onPhoneNumber" v-on:click="clickPhoneNumber()"></button>
			</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-ALIPAY -->
			<view v-if="status==0" class="openWrapper" :style="{top:tt}">
				<image class="open-icon" src="../../static/dianji.png"></image>
				<view class="open-title">点击开门</view>
				<button class="openCC" open-type="getAuthorize" scope="userInfo" @getAuthorize="onAlipayUserInfo" @error="onAuthError"></button>
			</view>
			<view v-if="status==1" class="openWrapper" :style="{top:tt}">
				<image class="open-icon" src="../../static/phone.png"></image>
				<view class="open-title">绑定手机号</view>
				<button class="openCC" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="onAlipayPhoneNumber" @error="onAuthError"></button>
			</view>
		<!-- #endif -->
		
		
		<view v-if="status==2" class="openWrapper" v-on:click="bindOpen()" :style="{top:tt}">
			<image class="open-icon" src="../../static/saoyisao.png"></image>
			<view class="open-title">扫码开门</view>
		</view>
		<view class="buttonWrapper">
			<view class="btn-mine" v-on:click="bindMine()">
				<image mode="aspectFit" class="btn-icon" src="../../static/wodexinxi.png"></image>
				<view class="btn-title">我的信息</view>
			</view>
			<view class="btn-kefu" v-on:click="bindKefu()">
				<image mode="aspectFit"  class="btn-icon" src="../../static/lianxikefu.png"></image>
				<view class="btn-title">联系客服</view>
			</view>
		</view>		
		<!-- <view class="fujin" v-on:click="bindFujin()">附近无人超市</view> -->
		<!-- #ifdef MP-ALIPAY -->
		<!-- <view class="chongzhi" v-on:click="onClear()">重置</view> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import common from '../../common/common.js';  
	import http from '../../common/http.js';
	export default {
		data() {
			return {
				title: 'Hello',
				status:0 ,//0点击开门, 1获取手机号, 2扫码开门,
				status_msgs:[''],
				isOutDoor:1,
				dsn:void 0,
				startqrcode:void 0,
				imageHeight:0
			}
		},
		computed: {
			tt: function () {
				var w = uni.getSystemInfoSync().windowWidth
				var h = w/0.64
				h = h*0.448-130/2
				return h+"px"
			}
		},
		onLoad(options) {
			console.log(uni.getSystemInfoSync())
			if (options.q != void 0) {
				this.startqrcode = decodeURIComponent(options.q)
			}
			var w = uni.getSystemInfoSync().windowWidth
			w = w/0.64
			this.imageHeight =  w+"px"
			this.initUserStatus()
		},
		
		methods: {
			// onClear() {
			// 	// #ifdef MP-ALIPAY
			// 	my.clearStorage()
			// 	// #endif
			// 	uni.showToast({
			// 		title:"重置成功"
			// 	})
			// },
			onUserInfo() {
				uni.showLoading({
					title:"加载中"
				})
				var self = this
				common.getUserInfo((res)=>{
					common.loginIfNeed((res)=>{
						console.log(res)
						var phone = res['userinfo']['Phone']
						if (phone == void 0 || phone.length == 0) {
							self.status = 1
							uni.showToast({
								title:"登录成功,请绑定手机号",
								icon:"none"
							})
						}else{
							self.status = 2
							uni.setStorageSync("phone", phone)
							self.doAutoOpenIfNeed()
						}
					})
				})
			},
			onAlipayUserInfo(e){
				uni.hideLoading()
				this.onUserInfo()
				
			},
			clickPhoneNumber() {
				uni.showLoading({
					title:'正在绑定'
				})
			},
			onPhoneNumber(e) {
				console.log(e)
				uni.hideLoading()
				this.doBindPhoneNumber(e.detail.encryptedData, e.detail.iv)
			},
			onAlipayPhoneNumber(e){
				uni.hideLoading()
				var self = this
				// #ifdef MP-ALIPAY
				my.getPhoneNumber({
					success(res){
						var encPhone = JSON.parse(res.response)['response']
						self.doBindPhoneNumber(encPhone)
					}
				})
				// #endif
			},
			doBindPhoneNumber(encPhoneData, iv=""){
				var self = this
				common.getUserInfo((res)=>{
					console.log(res)
					http.post("/user/update", {"avatar":res.avatarUrl, "nickname":res.nickName, "phone":encPhoneData, "iv":iv}, (r)=>{
						uni.setStorageSync("phone", r.Phone)
						console.log("user profile updated")
						uni.showToast({
							icon:'none',
							title:"绑定成功"
						})
						self.status = 2
						self.doAutoOpenIfNeed()
					}, "正在绑定")
				})
			},
			bindOpen () {
				var self = this
				common.getUserInfo((res)=>{
					common.loginIfNeed(()=>{
						uni.scanCode({
							onlyFromCamera:true,
							success(res) {
								self.doOpen(res.result)
							}
						})
					})
				})
			},
			initUserStatus() { //更新用户扫码状态
				this.status = 0
				var msg = ""
				if (common.isLogin()) {
					this.status = 1
				}
				if (common.isBindPhone()) {
					this.status = 2
					this.doAutoOpenIfNeed()
				}
				
				if (this.startqrcode) {
					this.checkStatusFinish()
				}
			},
			checkStatusFinish(){
				if (this.status == 0) {
					uni.showToast({
						icon:'none',
						"title":"请先授权登录"
					})
					return false
				}
				
				if (this.status == 1) {
					uni.showToast({
						icon:'none',
						"title":"请先绑定手机号"
					})
					return false
				}
				return true
			},
			parseQrcode(text){
				var params = common.getUrlParams(text)
				this.isOutDoor = params['o']//外1  内0
				this.dsn = params['dsn']
			},
			doAutoOpenIfNeed() {
				if (this.startqrcode != void 0) {
					this.doOpen(this.startqrcode)
				}
			},
			doOpen(qrcode) {
				var self = this
				this.parseQrcode(qrcode)
				if (this.dsn == void 0) {
					uni.showToast({
						icon:'none',
						title:'请扫描正确的开门码'
					})
					return
				}
				if (self.isOutDoor == 1) {
					http.post("/user/enter", {"dsn":this.dsn, "o":this.isOutDoor}, (res)=>{						
						uni.showToast({
							icon:'none',
							title:"开门成功"
						})				
						self.doJump()
					}, "正在开门")
				}else{
					http.post("/user/enter", {"dsn":this.dsn, "o":this.isOutDoor}, (res)=>{
						self.doJump()
					}, "加载中")
				}
				
			},
			doJump() {
				var self = this
				uni.redirectTo({
					url:"../store/store?dsn="+this.dsn,
					success() {
						self.dsn = void 0
						self.isOutDoor = 1
					}
				})
				
			},
			bindKefu () {
				common.showKefu()
			},
			bindMine () {
				if (this.checkStatusFinish() == false) {
					return
				}				
				common.getUserInfo((res)=>{
					common.loginIfNeed(()=>{
						uni.navigateTo({
							url:"../mine/mine"
						})
					})
				})
				
			},
			bindFujin() {
				uni.navigateTo({
					url:"../nearby/nearby"
				})
			},
			onAuthError(e) {
				uni.hideLoading()
				console.log(e)
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: white;
	}
	.indexWrapper {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		background-color: white;
		/* justify-content: center; */
	}
	.fujin {
		position: absolute;
		top: 10px;
		color: white;
		background-color: #17b8af;
		border-radius: 15px;
		height: 30px;
		box-sizing: border-box;
		padding: 5px 10px;
	}
	.kuaijie {
		top: 50px;
	}
	.bannerWrapper {
		width: 100%;
		background-color: white;
	}
	.zhuye {
		width: 100%;
		height: 100%;
	}
	.buttonWrapper {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		/* position: absolute; */
		/* bottom: 100px; */
	}
	.btn-mine {
		background-color: #52CCC7;
		display: inline-block;
		width: 120px;
		border-radius: 23px;
		display: flex;
		line-height: 46px;
		align-items: center;
		justify-content: center;
		color: white;
		box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
	}
	.btn-kefu {
		background-color: #52CCC7;
		display: inline-block;
		width: 120px;
		border-radius: 23px;
		display: flex;
		line-height: 46px;
		align-items: center;
		justify-content: center;
		color: white;
		box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
	}
	.btn-mine image, .btn-kefu image {
		width: 20px;
		height: 20px;
		margin-right: 2px;
	}
	.openWrapper {
		width: 130px;
		height: 130px;
		border-radius: 65px;
		color: #333333;
		position: absolute;
		left: 50%;
		margin-left: -65px;
		top: 30px;
	}
	.open-icon {
		position: absolute;
		width: 40px;
		height: 40px;
		left: 50%;
		top: 25px;
		margin-left: -20px;
	}
	.open-title {
		position: absolute;
		font-size: 16px;
		width: 100%;
		text-align: center;
		top: 50%;
		margin-top: 15px;
		color: #333333;
		font-weight: bold;
	}
	.openCC {
		border: none;
		border-radius:20;
		background-color: white;
		opacity: 0;
		width: 100%;
		height: 100%;
	}
</style>
